import React, { useCallback } from "react";
import { Form, Input, Button, message } from "antd";
import PropTypes from "prop-types";
import { WEBSITE_REG } from "../../lib/config";

const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 12 },
};

const validateMessages = {
    /* eslint-disable no-template-curly-in-string */
    required: "${label} 是必填项!",
    types: {
        email: "${label} is not validate email!",
        number: "${label} is not a validate number!",
    },
    pattern: {
        mismatch: "网址 格式不正确!",
    },
    whitespace: "不能只有空格字符!",
};

function CommentForm(props) {
    const { blogInfo, postComment } = props;
    const [form] = Form.useForm();
    const onFinish = useCallback((values) => {
        const { comment, nickname, email, website } = values.user;
        const data = {};
        data.blogId = blogInfo._id;
        data.blogTitle = blogInfo.title;
        data.comment = comment;
        data.nickname = nickname.trim();
        data.email = email.trim();
        data.website = website ? website.trim() : '';
        postComment(data, () => {
            // 成功添加了一条评论
            form.resetFields();
        }, () => {
            // 失败就提醒用户
            message.error({ content: '提交异常，请重试~' });
        });
    });
    return (
        <Form
            id="commentForm-container"
            {...layout}
            name="nest-messages"
            form={form}
            onFinish={onFinish}
            validateMessages={validateMessages}
        >
            <h3 className="form-title">发表评论</h3>
            <Form.Item
                name={["user", "nickname"]}
                label="昵称"
                rules={[{ required: true, whitespace: true }]}
            >
                <Input placeholder="输入昵称" />
            </Form.Item>
            <Form.Item
                name={["user", "email"]}
                label="邮箱"
                rules={[{ type: "email", required: true, whitespace: true }]}
            >
                <Input placeholder="邮箱，不会外露" />
            </Form.Item>
            <Form.Item
                name={["user", "comment"]}
                label="评论"
                rules={[{ required: true, whitespace: true }]}
            >
                <Input.TextArea placeholder="输入评论内容" />
            </Form.Item>
            <Form.Item
                name={["user", "website"]}
                label="站点"

                rules={[{ whitespace: true, pattern: WEBSITE_REG }]}
            >
                <Input placeholder="你的站点（https://），选填" />
            </Form.Item>
            <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                <Button type="primary" htmlType="submit">
                    发布评论
                </Button>
            </Form.Item>
        </Form>
    );
}

CommentForm.propTypes = {
    blogInfo: PropTypes.shape({
        _id: PropTypes.string,
        title: PropTypes.string,
    }).isRequired,
    postComment: PropTypes.func.isRequired,
};

export default CommentForm;
